<template>
    <div class="shop">
        <el-button size="mini" type="primary" @click="searchAuditData" style="float:right;">搜索</el-button>
        <el-input size="mini" placeholder="输入服务商账号搜索" v-model='mobile' style="float:right;margin-left:12px;width:180px;"></el-input>
        <el-input size="mini" placeholder="输入联系人姓名搜索" v-model='name' style="float:right;margin-left:12px;width:180px;"></el-input>
        <el-select style="width:140px; float:right;"
          size='mini'
          v-model="status"
          filterable
          placeholder="选择审核状态">
        <el-option label="全部" value="0"></el-option>
        <el-option label="待审核" value="1"></el-option>
        <el-option label="审核中" value="5"></el-option>
        <el-option label="审核通过" value="10"></el-option>
        <el-option label="审核驳回" value="15"></el-option>
        </el-select>
        <span style="float:right;margin-right:12px;margin-top:6px;">审核状态</span>

      <el-table :data="tableData"
      style="width:100%;margin:60px 0 20px;"
      max-height="720"
      :cell-style="tc"
      :header-cell-style="tccolor">

      <el-table-column label="ID" prop="uid"></el-table-column>
      <el-table-column label="服务商账号">
          <template slot-scope="scope">
              <p v-if="scope.row.user">{{scope.row.user.mobile}}</p>
              <p v-else>---</p>
          </template>
      </el-table-column>
      <el-table-column label="联系人" prop="id_name"></el-table-column>
      <el-table-column label="邀请人UID">
          <template slot-scope="scope">
              <p v-if="scope.row.to_be_invitation">{{scope.row.to_be_invitation.invitation_uid}}</p>
              <p v-else>---</p>
          </template>
      </el-table-column>
      <el-table-column label="身份证号" prop="id_no"></el-table-column>
      <el-table-column label="所属籍贯" prop="id_full_address"></el-table-column>
      <el-table-column label="入驻时间" prop="created_at"></el-table-column>
      <el-table-column label="审核状态">
          <template slot-scope="scope">
              <p v-if="scope.row.status == 1">待审核</p>
              <p v-if="scope.row.status == 5">审核中</p>
              <p v-if="scope.row.status == 10">审核通过</p>
              <p v-if="scope.row.status == 15">审核驳回</p>
          </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right">
        <template slot-scope="scope">
          <el-button v-if="scope.row.status == 1|| scope.row.status == 5" size="mini" type="primary" @click="WatchAuditCer(scope.row,1)">审核</el-button>
          <el-button v-if="scope.row.status == 10 || scope.row.status == 15" size="mini" type="primary" @click="WatchAuditCer(scope.row,2)">查看</el-button>
        </template>
      </el-table-column>
      </el-table>

    <div class="pagination">
        <el-pagination background
          @current-change="pageChange"
          :current-page="page"
          :page-size="size"
          layout="total, prev, pager, next, jumper"
          :total="total"></el-pagination>
    </div>

    <jdialog :visible.sync="isShowAuditOrLook" width='640px' title="服务商资质审核">
        <el-form style="padding:20px 40px 20px 20px;">
            <el-form-item label="服务商账号:">
                <el-input style="width:420px;" size="mini" disabled v-model="auditForm.mobile"></el-input>
            </el-form-item>
            <el-form-item label="推荐人账号:">
               <el-input style="width:420px;" size="mini" disabled v-model="auditForm.invite"></el-input>
            </el-form-item>
            <el-form-item label="服务商姓名:">
                <el-input style="width:420px;" size="mini" disabled v-model="auditForm.name"></el-input>
            </el-form-item>
            <el-form-item label="身份证号:">
                <el-input style="width:420px;" size="mini" disabled v-model="auditForm.id_card"></el-input>
            </el-form-item>
            <el-col :span='12'>
                <el-form-item label="性别:">
                    <el-input style="width:180px;" size="mini" disabled v-model="auditForm.sex"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span='12'>
                <el-form-item label="汉族:">
                    <el-input style="width:180px;" size="mini" disabled v-model="auditForm.nation"></el-input>
                </el-form-item>
            </el-col>
            <el-form-item label="出生年月:">
                <el-input style="width:420px;" size="mini" disabled v-model="auditForm.birth"></el-input>
            </el-form-item>
            <el-form-item label="家庭住址:">
                <el-input style="width:420px;" size="mini" disabled v-model="auditForm.address"></el-input>
            </el-form-item>
         
            <el-form-item label="身份证:" >
            <uploadImg flieName="front_card"
            class="icon_cate"
            :oldImgs="[auditForm.front_card]"
            :n="1"
            @getFile="getFile"></uploadImg>
            <!-- </el-form-item> -->
        
            
            <!-- <el-form-item label="营业执照:" style=""> -->
            
            <uploadImg flieName="company_license"
            style="float:right;margin-right:56px;"
            :oldImgs="[auditForm.company_license]"
            :n="1"
            @getFile="getFile"></uploadImg>
            <span style="float:right;color:#666;margin-right:24px;">营业执照:</span>
            </el-form-item>
           
            <el-form-item label="审核意见:">
              <el-radio-group v-model="auditForm.status" :disabled ="auditForm.status == 10 || auditForm.status == 15">
              <el-radio label="10">审核通过</el-radio>
              <el-radio label="15">审核驳回</el-radio>
              </el-radio-group>
                  <div style="float:right;cursor:pointer;color:blue;font-size:13px;" @click="auditListWatch">审核列表 ></div>
            </el-form-item>
            <el-form-item label="审核备注:">
              <el-input type="textarea"
              :disabled ="auditForm.status == 10 || auditForm.status == 15"
            :rows="3"
            style="width:420px;"
            placeholder="请输入备注"
            v-model="auditForm.remark">
          </el-input>

      
            </el-form-item>
        </el-form>

        <div style="text-align:center;margin-bottom:18px;">
            <el-button size="mini" @click="isShowAuditOrLook = false">取消</el-button>
            <el-button size="mini" type='primary' @click="auditServiceInformation">确定</el-button>
        </div>
    </jdialog>
     <el-dialog
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
  <!-- :timestamp="activity.timestamp" -->
  
     <div v-if="activities">
         <el-timeline-item 
      v-for="(activity, index) in activities"
      :key="index"
      >
      {{activity.content}}
    </el-timeline-item>
     </div>
     <div v-else style="text-align:center;">暂无记录</div>
</el-dialog>
    </div>
</template>

<script>
import uploadImg from "@/components/uploadImg";
import {serviceProviderToVerifySearch, serviceProviderExamineUpdate, serviceProviderVerifyRecordList} from '@/api/service'
export default {
    data () {
        return {
         status:'',
         mobile:'',
         name:'',
         page:1,
         size:20,
         tableData:[],
         total:0,

         isShowAuditOrLook:false,
         auditForm:{
             mobile:'',
             invite:'',
             name:'',
             id_card:'',
             sex:'',
             nation:'',
             birth:'',
             address:'',
             front_card:'',
             company_license:'',
             status:'',
             id:'',
         },
         type:'',
         dialogVisible:false,
         activities:[]

        }
    },
    components:{
        uploadImg
    },
    created(){
      this.getserviceProviderToVerifySearchData()
    },
    methods : {
      //搜索
      searchAuditData(){
        this.getserviceProviderToVerifySearchData()
      },
      //换页
      pageChange(page){
          this.page = page
          //获取更多数据
          this.getserviceProviderToVerifySearchData()
      },
      auditListWatch() {
          this.getserviceProviderVerifyRecordListData()
      },
      handleClose() {
        this.dialogVisible = false
      },
      WatchAuditCer(row,type){
          this.auditForm.mobile = row.user.mobile
          if(row.to_be_invitation){
           this.auditForm.invite = row.to_be_invitation.invitation_uid
          }else{
              this.auditForm.invite = ''
          }
          
          this.auditForm.name =  row.id_name;
          this.auditForm.id_card = row.id_no;
          this.auditForm.sex = row.id_sex;
          this.auditForm.nation = row.id_nation;
          this.auditForm.birth = row.id_birth;
          this.auditForm.address = row.id_full_address;
          this.auditForm.front_card = row.front_card;
          this.auditForm.company_license = row.company_license;
          this.auditForm.status = row.status
          this.auditForm.id = row.id
         if(type == 1){
            this.isShowAuditOrLook = true
            this.type = type
         }else{
           this.isShowAuditOrLook = true 
           this.type = type
         }
      },
      //确定审核服务商
      auditServiceInformation(){
        if(!this.auditForm.status){
            this.$message.error('审核操作不能为空')
            return
        }
        
        this.getserviceProviderExamineUpdate()
      },
      //获取服务商商审核列表数据
      async getserviceProviderToVerifySearchData () {
         if(this.status == 0){
             this.status = ''
         }
         var url = 'status='+this.status+
                   '&name='+this.name+
                   '&mobile='+this.mobile+
                   '&page='+this.page+
                   '&size='+this.size
         let res = await serviceProviderToVerifySearch (url)
         if(res.code === 10000){
             this.tableData = res.data.data
             this.total = res.data.total
         }else{
            this.$message.error(res.message)
         }
      },
      
      async getserviceProviderVerifyRecordListData(){
          this.dialogVisible = true
          let res  =  await serviceProviderVerifyRecordList(this.auditForm.id)
          if(res.code === 10000){
            this.activities = res.data.data
            this.dialogVisible = true
          }else{
            this.$message.error(res.message)
          }
      },
      getFile (file) {
      this.auditForm[file.name] = file.files.length > 0 ? file.files[0].url : "";
      },
      //审核
      async getserviceProviderExamineUpdate(){
        if(!this.auditForm.remark){
            this.auditForm.remark = ''
        }
       let res  = await serviceProviderExamineUpdate({id:this.auditForm.id,status:this.auditForm.status,remark:this.auditForm.remark})
       if(res.code === 10000){
         this.$message.success(res.message)
         this.getserviceProviderToVerifySearchData()
         this.isShowAuditOrLook = false
       }else{
           this.$message.error(res.message)
       }
      },
      tc () {
      return "text-align:center; color:#333333; font-size:12px;";
        },
       tccolor () {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
        },

    }
}
</script>

<style lang="scss" scoped>
.shop{
    padding: 20px;
    .pagination{
        float: right;
    }
    .icon_cate {
        float: left;
    margin-left: 12px;
  }
}
</style>